<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.isA{
				color: red;
			}
			.static {
				font-size: 32px;
			}
			.isC {
				color: yellow;
			}
			.isActive {
				color: green;
			}
		</style>
	</head>
	<body>
		 <div id="demo">
			 
			 <!--1. 给 v-bind:class 一个对象，以动态地切换 class, v-bind:class 指令也可以与普通的 class 属性共存 -->
			<p class="static" v-bind:class="{isA:isActive, isB:hasError}">12345678</p>
			
			<!--2. 给 v-bind:class 绑定一个变量 -->
			<p v-bind:class="myCalss">my name is bingHeng</p>
			
			<!--3. 绑定的数据不必内联定义在模板中-->
			{{classObject}}
			<p v-bind:class="classObject">你说我是你的超级英雄</p>
			
			<!--4. 绑定一个返回对象的计算属性，这是一个常用且强大的模式 -->
			<p v-bind:class="myClassObject">绑定一个返回对象的计算属性，这是一个常用且强大的模式</p>
			<p :class="myClassObject2">绑定一个返回对象的计算属性，这是一个常用且强大的模式2</p>
		 </div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#demo',
				data:{
					myCalss:'isC',
					isActive:true,
					hasError:true,
					isA:'isA',
					isY:true,
					erroe:null,
					classObject:{
						isA:true,
						isC:false
					}
				},
				computed:{
					myClassObject:{
						get:function() {
							return this.isA + "ctive"
						}
					},
					myClassObject2: function() {
						return{
							active: this.isActive && !this.error,
							'text-danger': this.error && this.error.type === 'fatal'
						}
					}
				}
			});
		</script>
	</body>
</html>
